<template>
	<aside v-show="list.length && show">
		<div class="panel panel-bg hidden-xs">
			<div class="panel-heading">
				<span class="glyphicon glyphicon-link newicon"></span>浏览排行
				<span class="panel-remove glyphicon glyphicon-remove-circle" @click="show = false"></span>
			</div>
			<ul class="list-group list-group-flush">
				<li class="list-group-item" v-for="item in list">
					<span class="post-title">
						<router-link :to="`/topics/item_${item.id}.html`">
							{{item.title}}						
						</router-link>
					</span>
					<span class="badge">{{item.see_nums}}</span>
				</li>
			</ul>
		</div>
	</aside>
</template>
<script>
	export default {
		data() {
			return {
				list: [],
				show: true
			}
		},
		created() {
			this.__getList()
		},
		methods: {
			__getList() {
				this.$http.get('topics-hot').then((response) => {
					this.list = response.data;
					this.$emit('ready');
				})
			}
		}
	}
</script>

<style lang="scss" scope>
	.glyphicon {
	    position: relative;
	    top: 1px;
	    display: inline-block;
	    font-family: 'Glyphicons Halflings';
	    -webkit-font-smoothing: antialiased;
	    font-style: normal;
	    font-weight: normal;
	    line-height: 1;
	}

	.panel-bg {
		a {
		    color: #666;
		    &:hover {
			    color: #b94a48;
			}
		}
		.list-group {
			.list-group-item {
				.post-title {
				    display: inline-block;
				    width: 75%;
				    white-space: nowrap;
				    text-overflow: ellipsis;
				    overflow: hidden;
				}
				.badge {
				    background-color: #d9534f;
				}
			}
		}
	}
</style>